<template>  
    <div style="border: 1px solid #ccc;">  
      <Toolbar  
        style="border-bottom: 1px solid #ccc"  
        :editor="editor"  
        :defaultConfig="toolbarConfig"  
        :mode="mode"  
      />  
      <Editor  
        style="height: 500px; overflow-y: hidden;"  
        v-model="html"  
        :defaultConfig="editorConfig"  
        :mode="mode"  
        @onCreated="onCreated"  
        @onChange="onChange"  
      />  
    </div>  
  </template>  
    
  <script>  
  import Vue from 'vue';  
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';  
  import "@wangeditor/editor/dist/css/style.css";  
    
  export default {  
    name: 'WangEditor',  
    components: { Editor, Toolbar },  
    props: {  
      content: {  
        type: String,  
        default: ''  
      }  
    },  
    data() {  
      return {  
        editor: null,  
        html: this.content,  
        toolbarConfig: {},  
        editorConfig: { placeholder: '请输入内容...' },  
        mode: 'default' // or 'simple'  
      };  
    },  
    methods: {  
      onCreated(editor) {  
        this.editor = Object.seal(editor);  
        // 如果需要，可以在这里设置初始内容  
        // this.editor.setHtml(this.content);  
      },  
      onChange(editor) {  
        this.$emit('contentChange', editor.getHtml());  
      }  
    },  
    mounted() {  
      // 如果需要在mounted后设置内容，可以通过watch prop来实现  
    },  
    beforeDestroy() {  
      const editor = this.editor;  
      if (editor == null) return;  
      editor.destroy();  
    },  
    watch: {  
      content(newVal) {  
        if (this.editor) {  
          this.editor.setHtml(newVal);  
        } else {  
          this.html = newVal;  
        }  
        
      }  
    }  
  };  
  </script>
  <style lang="less" scoped >
  .quillEditor {
    width: 600px;
    border: 1px solid #ccc !important;
   
  .toolbar-style {
    border-bottom: 1px solid #ccc !important;
    }
   
  .editor-style {
    height: 400px !important;
    overflow-y: hidden !important;
    }
  }
  </style>